<meta title="佣金订单"/>
<style>
	.td-title {
		width: 150px;
	}

	.td-value {
		width: 200px;
	}

	.inner-table {
		font-size: 12px;
	}

	.inner-table td {
		padding: 2px;
	}
</style>
<div class="p">
	<div class="m-b clearfix">
		<form class="form-inline " id="form">
			<div class="p-b-xs">
				<input autocomplete="off" type="text" class="form-control input-sm" placeholder="商品名"
							 style="width:200px;" name="itemTitle"/>
				<input autocomplete="off" type="text" class="form-control input-sm" placeholder="电商平台商品ID"
							 style="width:200px;" name="itemId"/>
				<input autocomplete="off" type="text" class="form-control input-sm" placeholder="电商平台订单号"
							 style="width:200px;" name="orderNo"/>
				<input autocomplete="off" type="text" class="form-control input-sm" placeholder="创建开始时间"
							 style="width:120px;"
							 s="datetimepicker" name="minCreateTime"/> -
				<input autocomplete="off" type="text" class="form-control input-sm" placeholder="创建结束时间"
							 s="datetimepicker"
							 style="width:120px;" name="maxCreateTime"/>
				<input autocomplete="off" type="text" class="form-control input-sm" placeholder="结算开始时间"
							 style="width:120px;"
							 s="datetimepicker" name="minSettledTime"/> -
				<input autocomplete="off" type="text" class="form-control input-sm" placeholder="结算结束时间"
							 s="datetimepicker"
							 style="width:120px;" name="maxSettledTime"/>
				<input autocomplete="off" type="hidden" name="page" id="page" value="1"/>
			</div>
			<div>
				<select class="form-control input-sm" s="select"
								s-build="S.get('/api/enum/valuesMap/core.enums.EcomPlat')"
								name="ecomPlat">
					<option value="">电商平台</option>
				</select>
				<select class="form-control input-sm" s="select"
								s-build="S.get('/api/enum/valuesMap/core.enums.CommissionOrderStatus')"
								name="status">
					<option value="">状态</option>
				</select>
				<select class="form-control input-sm" s="select"
								s-build="S.get('/api/enum/valuesMap/core.enums.CommissionOrderSort')" name="sort">
					<option value="">默认排序</option>
				</select>
				<input type="hidden" name="fetchAllotEarning" value="true"/>
				<button type="button" class="btn btn-default btn-sm"
								s-click="$page.node.val(1); $commissionOrdersGrid.refresh()">查询
				</button>

				<input type="button" class="btn pull-right btn-default btn-sm" s-click="exportXsl()" value="导出"/>
			</div>
		</form>

	</div>
	<div id="commissionOrdersGrid"
			 s='datac,nda'
			 s-data="S.get('/api/commission-order/search', $form.node.serialize())">
		<table class="table table-striped table-bordered table-hover">
			<tr>
				<th>商品</th>
				<th>用户</th>
				<th>明细</th>
				<th>状态</th>
				<th class="text-right">操作</th>
			</tr>
			<tbody s="loop" s-data-filter="'results'">
			<tr s-loop-role="empty">
				<td colspan="5">暂无数据</td>
			</tr>
			<tr s-loop-role="row" s-check-role="i" s="datac" class="commissionOrder">
				<td s="tpl" class="row">
					<div style="width: 200px;">
						<img src="{%=this.itemPicUrl%}" style="max-width: 50px; max-height: 50px;" class="pull-left"/>
						<div class="pull-right" style="width: 140px;">
							<div style="text-overflow: ellipsis; overflow: hidden; height: 40px;">{%=this.itemTitle%}
							</div>
						</div>
					</div>
				</td>
				<td s="tpl">
					<div style="width: 200px;">
						<img src="{%=this.userAvatarUrl%}" style="max-width: 50px; max-height: 50px;"
								 class="pull-left"/>
						<div class="pull-right" style="width: 140px;">
							<div>{%=this.userNickname%}</div>
							<div class="text-info">{%=this.userPhone%}</div>
						</div>
					</div>
				</td>
				<td>
					<div>
						<div class="col-sm-5" style="padding: 0; padding-right: 5px;">
							<table class="m-b-xs inner-table table table-striped table-bordered table-condensed table-striped">
								<tr>
									<td class="td-title">金额:</td>
									<td class="td-value" name="payFee.toFixed(2)"></td>
									<td class="td-title">价格:</td>
									<td class="td-value" name="price.toFixed(2)"></td>
								</tr>
								<tr>
									<td class="td-title">数量:</td>
									<td class="td-value" name="itemNum"></td>
									<td class="td-title">平台:</td>
									<td class="td-value" name="ecomPlatTitle"></td>
								</tr>
								<tr>
									<td class="td-title">订单号:</td>
									<td class="td-value" colspan="3" name="orderNo"></td>
								</tr>
							</table>
						</div>
						<div class="col-sm-7" style="padding: 0;">
							<table class="table inner-table m-b-xs table-striped table-bordered table-condensed table-striped">
								<tr>
									<td class="td-title">预估:</td>
									<td class="td-value text-info" name="estimateCommissionFee.toFixed(2)"></td>
									<td class="td-title">预估比:</td>
									<td class="td-value" name="estimateCommissionRate.toFixed(2)"></td>
								</tr>
								<tr>
									<td class="td-title">佣金:</td>
									<td class="td-value text-info" name="commissionFee.toFixed(2)"></td>
									<td class="td-title">佣金比:</td>
									<td class="td-value text-info" name="commissionRate.toFixed(2)"></td>
								</tr>
								<tr>
									<td class="td-title">创建:</td>
									<td class="td-value" name="createTime"></td>
									<td class="td-title">结算:</td>
									<td class="td-value" name="settledTime"></td>
								</tr>
							</table>
						</div>
					</div>
					<table style="margin-bottom: 0px;"
								 class="table inner-table table-condensed table-bordered table-striped">
						<tr>
							<td class="td-title">总分配</td>
							<td class="td-value text-info" name="allotFee.toFixed(2)">--</td>
							<td class="td-title">总人数</td>
							<td class="td-value" name="allotEarning.userCommissionOrderNum">--</td>
							<td class="td-title">总奖励</td>
							<td class="td-value text-info" name="allotEarning.totalUserRewardFee.toFixed(2)">--</td>
							<td class="td-title">总佣金</td>
							<td class="td-value text-info" name="allotEarning.totalUserCommissionFee.toFixed(2)">--</td>
						</tr>
						<tr>
							<td class="td-title">总比例</td>
							<td class="td-value" name="allotEarning.totalUserCommissionRate.toFixed(2)">--</td>
							<td class="td-title">总结算佣金</td>
							<td class="td-value text-info" name="allotEarning.totalSettledCommissionFee.toFixed(2)">--
							</td>
							<td class="td-title">总结算奖励</td>
							<td class="td-value text-info" name="allotEarning.totalSettledRewardFee.toFixed(2)">--</td>
							<td class="td-title">总结算</td>
							<td class="td-value text-info" name="allotEarning.totalSettledFee.toFixed(2)">--</td>
						</tr>
					</table>
				</td>
				<td s="tpl">
					<label class="label
                            {%
                                switch(this.status) {
                                    case 'WAIT_PAY': out.print('label-default'); break;
                                    case 'PAID': out.print('label-info'); break;
                                    case 'WAIT_SETTLE': out.print('label-warning'); break;
                                    case 'SETTLED': out.print('label-success'); break;
                                    case 'INVALID': out.print('label-default'); break;
                                }
                            %}
                            ">{%=this.statusTitle%}</label>
				</td>
				<td class="text-right" s="tpl">
					{%if(this.allocated) {%}
					<a href="popup:/user-commission-order/user-commission-order-list.html?commissionOrderId={%=this.id%}"
						 class="btn btn-link btn-xs">分佣明细</a>
					{%}else{%}
					<a href="javascript:;" s-click="allocated(this)"
						 class="btn btn-link btn-xs">分佣</a>
					{%}%}
				</td>
			</tr>
			</tbody>
			<tfoot>
			<tr>
				<td colspan="5" class="text-right">
					共有<span name="total"></span>个数据
					<ul s="pagination"
							s-pagination="{action:function(){$page.node.val(this); $commissionOrdersGrid.refresh()}}"
							class="pagination pagination-sm">
					</ul>
				</td>
			</tr>
			</tfoot>
		</table>
	</div>
</div>
<script type="text/javascript">

	function allocated($this) {
		S.popupOpen('/user/user-selector.html').done(function (list) {
			if (list && list.length) {
				var user = list[0]
				S.confirm('确定将当前订单分佣给：' + user.nickname + ' 吗？').done(function () {
					S.post('/api/commission-order/allocate/' + $this.parent().data().id, {userId: user.id}).done(function (rs) {
						if (rs.success) {
							S.toast('操作成功')
							$commissionOrdersGrid.refresh()
						} else {
							S.alert(rs.msg);
						}
					})
				})
			}
		})
	}

	function exportXsl() {
		S.popupOpen('/export-num.html').done(function (maxCount) {
			if (maxCount) {
				window.open('/api/commission-order/export?' + $form.node.serialize() + '&maxCount=' + maxCount)
			}
		})
	}

</script>